<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<style>
    <!--
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    #goodsQr {
        min-height: 40px;
        width: 80%;
    }

    #mGoods {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        max-height: 500px;
        min-height: 100px;
        overflow-y: auto;
        padding: 10px;
        width: 97.5%;
    }

    .box {
        border: 1px solid blue;
        border-radius: 4px;
        margin: 4px;
        padding: 6px;
        line-height: 20px;
    }

    .box .close {
        margin-top: -20px;
    }

    -->
</style>
<!-- 分页显示演示开始 -->
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a deny="not" class="nFocus" href="#single" data-toggle="tab">
            <i class="icon-tags"></i>
            商品出库
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="single">
        <form id="inputForm" class="well form-inline" action="${ctx}/adoms/goods/outStock" method="post">
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2">选择订单:</td>
                    <td>
                        <select id="order" style="width: auto;" name="id">
                            <option value="0" id="please">请选择出库单...</option>
                            <c:forEach items="${orderList }" var="order" varStatus="i">
                                <option value="${order.id }">${i.index + 1 }.${order.code } - ${order.goodsNumber}
                                    - ${order.status.value }</option>
                            </c:forEach>
                        </select>
                        <span class="tBlue">序号.订单编号-商品数量-订单状态</span>
                    </td>
                </tr>
                <tr>
                    <td>商品定购详情：</td>
                    <td>
                        <div id="mInfo"></div>
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">
                        商品二维码:
                        <br/>
						<span class="tRed">
							共
							<span id="outTotal">0</span>
							条
							<br/>
							已录入
							<span id="outNum">0</span>
							条
						</span>
                    </td>
                    <td>
                        <input name="goodsQr" id="goodsQr" class="span6" type="text" maxlength="50"/>
                        <span id="clearBtn" class="btn btn-small btn-primary">清 空</span>
                    </td>
                </tr>
                <tr>
                    <td valign="top">出库货物列表:</td>
                    <td>
                        <div id="mGoods">
                            <div id="qrBar"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td valign="top">备注:</td>
                    <td>
                        <textarea id="memo3" maxlength="400" name="memo3" rows="4" class="span10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>操作员:</td>
                    <td>
                        <input type="text" id="outUser" name="outUser" value="${USER.name }"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="text-center">
                        <input id="outSubmit" class="btn  span2 btn-primary" title="商品出库后，订单状态将更新为已发货"
                               disabled="disabled" type="button" value="确认出库"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div id="orderDetail"></div>
    <a class="right btn" href="#single" deny="not">
        <i class="icon-arrow-up"></i>
        TOP
    </a>
</div>
<script>
    $(document).ready(function () {
        //全局共用变量
        var marchandiseIdString = "mid";
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                marchandise: "required",
                department: "required",
                outUser: "required",
                salesState: "required",
                qrCode: "required",
                // 				outTime : "required",
                memo3: "required"
            }
        });
        $("#order").change(function () {
            $("#please").remove();
            var orderId = $(this).val();
            if (orderId) {
                marchandiseIdString = "";
                //加载选中的订单所订购的商品列表详情
                $("#mInfo").load("${ctx}/adoms/orderLine/list/" + orderId + " #dataList", function () {
                    $("#dataList tr").each(function () {
                        $("a", this).removeAttr("href");
                        $("th:eq(1)", this).remove();
                        $("th:last", this).remove();
                        //$("th:last", this).after("<th><a href='###'>已录入数</a></th>");
                        $("th:last", this).show();
                        $("td:eq(1)", this).remove();
                        $("td:last", this).remove();
                        var counterId = "counter" + $("td[mId]", this).attr("mId");
                        marchandiseIdString += "#" + counterId + ",";
                        //$("td:last", this).after("<td id='" + counterId + "' class='tRed'>0</td>");
                        $("td:last", this).attr("id", counterId).addClass('tRed').show();
                    });
                    //计算已经入库的数字
                    var num = 0;
                    $("td.hasIn").each(function () {
                        num += parseInt($(this).html());
                    });
                    $("#outNum").html(num);
                });
            }
            //加载订单的详情
            $("#orderDetail").load("${ctx}/adoms/order/view/" + $(this).val() + " #printDiv", function () {
                $("#clearBtn").click();
                var order = $("#order" + orderId);
                var mid = $("input[name='marchandise.id']", order).val();
                var goodsNumber = $("input[name=goodsNumber]", order).val();
                $("#outTotal").text(goodsNumber);
                $("#mDetail").remove();
            }, "html");
        });
        $("#outSubmit").click(function () {
            $("#inputForm").submit();
        });
        $("#goodsQr").on("keyup blur", function (e) {
            var _self = $(this);
            var keyCode = e.keyCode;
            if (!keyCode || keyCode == 13) {
                var val = $.trim($("#goodsQr").val());
                if (!val) return false;
                var html = $("#qrBar").html();
                if (html.indexOf(val) < 0) {
                    if (val) {
                        $.post("${ctx}/adoms/goods/getGoodsByCodeOrBox", {
                            qrCode: val
                        }, function (result) {

                            if (result.isBox && result.isOpen) {
                                msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
                                return false;
                            }

                            var data = result.data;
                            //列出本箱中未入库的货物
                            var len = 0; //有效计数器
                            var inMid = "";
                            var box = $("<div name='box' class='box' value='" + val + "'><span class='close' name='boxRemove'>x</span></div>");
                            if (data) {

                                //是否已经开箱
                                var isOpenBox = false;
                                if (data.length > 1 && data[0].mNumOfBox != data.length) {
                                    isOpenBox = true;
                                    msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
                                    return false;
                                }

                                //过滤重复的二维码
                                var isQrRepeat = false;
                                $.each(data, function (i, item) {
                                    var length = $("[name=goodsId][value=" + item.gId + "]").length;
                                    if (length > 0) {
                                        isQrRepeat = true;
                                        if (data.length > 1) {
                                            msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
                                        } else {
                                            msgAlert.show("商品" + item.qwCode + "重复扫描！");
                                        }
                                        return false;
                                    }
                                });
                                if (isQrRepeat) {
                                    return false;
                                }

                                var willNum = 0;
                                $.each(data, function (i, item) {
                                    //计数
                                    var mid = item.mId;
                                    var counterId = "#counter" + mid;
                                    inMid = counterId;
                                    var total = parseInt($.trim($("#mg" + mid + " span[itemsNum]").text()));
                                    var hasIn = parseInt($.trim($(counterId).html()));
                                    if (hasIn == total) {
                                        msgAlert.show("商品：" + item.mName + "已录入完成！");
                                        return false;
                                    }
                                    if (willNum == 0) {
                                        willNum = data.length + hasIn;
                                        if (willNum > total) {
                                            msgAlert.show("录入数量已达上限，请分单个商品录入！");
                                            return false;
                                        }
                                    }
                                    if (marchandiseIdString.indexOf(counterId) > 0) {
                                        var goods = item.mName + "<input type='hidden' name='goodsId' value='" + item.gId + "'/> - " + item.qwCode + " - " + item.state + "<br/>";
                                        $(counterId).html(parseInt($(counterId).text()) + 1); //计数每样商品
                                        $("#outNum").html(parseInt($("#outNum").html()) + 1);
                                        //提交按钮可用
                                        if ($("#outTotal").text() == $("#outNum").text()) {
                                            $("#outSubmit").removeAttr("disabled");
                                        }
                                        len++;
                                        box.append(goods);
                                    }
                                });
                                if (len > 0) {
                                    box.prepend("二维码：" + val + " - 数量：" + len + "<br/>");
                                    if (len == 1) {
                                        box.prepend("<input type='hidden' name='boxsId' value='" + data[0].qbId + "'/>");
                                    }
                                } else {
                                    box.prepend("二维码：" + val + " - <span style='color:red;'>无效</span><br/>");
                                }
                            } else {
                                box.append("二维码：" + val + " <span style='color:red;'>无效</span>");
                            }
                            $(".close", box).click(function () {
                                $(inMid).html(parseInt($(inMid).text()) - len); //计数每样商品
                                $("#outNum").html(parseInt($("#outNum").html()) - len);
                                box.remove();
                            });
                            $("#qrBar").prepend(box);
                        }, "json");
                    } else {
                    }
                } else {
                    msgAlert.show("该二维码已扫描！");
                }
                _self.val("");
            }
        }).focus(function () {
            if ($("#order").val() == "0") {
                msgAlert.show("请选择发货订单！");
                return false;
            }
        });
        $("#clearBtn").click(function () {
            $("#goodsQr").val("");
            $("#qrBar").html("");
            $("#outSubmit").attr("disabled", "disabled");
            $("#outNum").html("0");
            $(".hasIn.tRed").html("0");
        });
    });
</script>
<div class="hide">
    <c:forEach items="${orderList }" var="order" varStatus="i">
        <div class="hide" id="order${order.id }">
            <input type="hidden" value="${order.marchandise.id }" name="marchandise.id"/>
            <input type="hidden" value="${order.goodsNumber }" name="goodsNumber"/>
        </div>
    </c:forEach>
</div>
<c:if test="${msg != null}">
    <script type="text/javascript">
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if></body>
</html>